<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :pagination="false" :requestApi="getParams">
      <template #tableHeader>
        <el-button type="primary" @click="opera">添加参数</el-button>
        <el-button type="danger">删除参数</el-button>
      </template>
      <template #opera>
        <el-button :icon="Delete" link>删除</el-button>
      </template>
    </ProTable>
    <paramsDrawer ref="paramsRef"> </paramsDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ref } from "vue";
import { Delete } from "@element-plus/icons-vue";
import paramsDrawer from "../components/paramsDrawer.vue";
import { createParams, getParams } from "@/api/modules/shop";

const paramsRef = ref<InstanceType<typeof paramsDrawer> | null>();

const columns: ColumnProps[] = [
  { prop: "name", label: "参数名称(唯一)" },
  { prop: "paramName", label: "实际参数名称" },
  { prop: "paramType", label: "类型" },
  { prop: "opera", label: "操作" }
];

const opera = () => {
  const params: any = {
    row: { name: "", paramName: "", paramType: "" },
    api: createParams,
    getTable: proRef.value?.getTableList
  };
  paramsRef.value?.acceptParams(params);
};

const proRef = ref<InstanceType<typeof ProTable> | null>();
</script>

<style></style>
